<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>kaos test</TITLE>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$.fn.extend({
Comment_control:function(option_data){
// , のセパレータでアレイに入れる
var data1_Array =option_data.data1.split(",");
var num1_Array  =option_data.num1.split(",");
// 指定されたセレクタをループ
$(this).each(function(){
// 指定されたセレクタの中の .c-bodyのテキスト部分を参照
var str=$('.c-body',this).text();
// num の判定
for(i=0; i<data1_Array.length; i++){
 if(str.indexOf(data1_Array[i])!=-1){
   var num=num1_Array[i];
 }
}
//alert("str="+str+" num="+num);
// 指定されたセレクタの中の .kaos のＣＳＳを変更
$('.kaos',this).css("background-position","left "+num+"px");
});
}
});
$(document).ready(function() {
$('#comment-area .c-wrap').Comment_control({data1:"[1],[2],[3],[4],[5],[6]",num1:"10,20,30,40,50,60"});
});
</script>
<style>
.kaos{
background-image:url(http://kiyoto777.web.fc2.com/test/gaz1.gif);
background-repeat:no-repeat;
background-position:left top;
width:300px;
height:100px;
display:block;
border:1px dotted #000000;
}
</style>

</HEAD>
<BODY>
<div id="comment-area">
<div class="c-wrap">
<div class="c-left">
<div class="kaos">
<div class="number">1</div>
</div><!-- kaos -->
<div class="c-name">コメント名</div>
<div class="c-time">コメント年月日</div>
</div><!-- c-left -->
<div class="c-right">
<div class="c-body"><i class="c-arrow"></i>[1]</div>
</div>
</div><!-- c-wrap -->
<br><br><br><br>
<div class="c-wrap">
<div class="c-left">
<div class="kaos">
<div class="number">2</div>
</div><!-- kaos -->
<div class="c-name">コメント名</div>
<div class="c-time">コメント年月日</div>
</div><!-- c-left -->
<div class="c-right">
<div class="c-body"><i class="c-arrow"></i>[5]</div>
</div>
</div><!-- c-wrap -->
</div><!-- comment-area -->

</BODY></HTML>
